<template>
    <div class="jd-cart">
        
        <!-- 返回按钮 -->
        <Navbabbar title="购物车">
            <template>
                <span @click="$router.replace('/')">首页</span>
            </template>
        </Navbabbar>
        <JDiNotData :show="ishow"></JDiNotData>
        <!-- 网格布局 -->
        <van-swipe-cell v-for="(item,index) in list" :key="item._id">
            <van-row 
            type="flex" 
            align="center"
            class="jd-cart-row"
            >
                <van-col span="4">
                    <van-checkbox v-model="item.flag" @click="checkolick"></van-checkbox>
                </van-col>

                <van-col span="20">
                            <van-card
                            :num="item.num"
                            :price="item.good&&(item.good.price.toFixed(2))"
                            :desc="item.good&&item.good.desc"
                            :title="item.good&&item.good.name"
                            :thumb="$img.imgBase+(item.good&&item.good.img)"
                            >
                                <template #footer>
                                     <van-stepper v-model="item.num" />
                                </template>
                            </van-card>  

                    </van-col>
            </van-row>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="dellist(item,index)" />
                </template>
        </van-swipe-cell>

        <!-- 底部结算 -->
        <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit()">
            <van-checkbox  @click="checkAll" v-model="full">全选</van-checkbox>
            <template #tip>
                你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
            </template>
        </van-submit-bar>  
    </div>
</template>
<script>
import { Card,Button,Tag, Icon,SubmitBar,Checkbox,Col, Row, CheckboxGroup,SwipeCell,Stepper} from 'vant';
import { Navbabbar,JDiNotData} from '@/components/';
export default {
    components:{
        [Card.name]:Card,
        [Button.name]:Button,
        [Tag.name]:Tag,
        [ Icon.name]: Icon,
        [SubmitBar.name]:SubmitBar,
        [Checkbox.name]:Checkbox,
        [Col.name]:Col,
        [Row.name]:Row,
        [CheckboxGroup.name]:CheckboxGroup,
        [SwipeCell.name]:SwipeCell,
        [Stepper.name]:Stepper,
        Navbabbar,
        JDiNotData

    },
    data(){
        return{
            full:false,
            list:[],
            ishow:false
        }
    },
    watch:{
        // 监听list来改变ishow的值
        list(){
            if(this.list.length===0){
                this.ishow=true
            }
        }
    }
    ,
    computed:{
        total(){
            var s = 0
            this.list.map(ele=>{
                if(ele.flag){
                    s += ele.num*ele.good.price
                }
            })
            return s*100
        }
    },
    methods:{
        gohome(){
            // 返回上一界面
            // location.href="Home.vue"
            this.$router.back()
            console.log("退出分枝页面");
        },
        onSubmit(){
            // 提交订单逻辑
            // 判断list中的元素有flag才能提交
            this.list.map(ele=>{
                let ids = ''
                if(ele.flag){
                ids += `;${ele._id}`
                this.$http.fecthOncart({ids}).then(()=>{
                console.log("提交成功");
                this.$router.push('/user')
                })

                }
            })

                
        }
         
            

            
        ,
        onClickEditAddress(){
            console.log("修改地址");
        },    
        checkAll() {
            // 【全选功能】
            // 遍历list元素  把list的每个元素的flag 的状态交给full来控制
            this.list.map((ele,index)=>{
                this.list[index].flag = this.full
            })
            // this.$forceUpdate()//强制刷新
            this.list= JSON.parse(JSON.stringify(this.list))  //这里要用深复制

            
        },
        checkolick(){
            // 【单选按钮】
            var  sum = 0 //这个sum不能定义在data中，就不对
            // 定义一个sum来接收单选功能为true的数量
            // 使用map遍历list的每一个元素 逻辑：判断当前元素的flag存在时就让sum的数量加加
            // 再拿这个值根list的长度去对比，
            // 如果全等就让全新按钮对应的full为true反之则为false
            this.list.map(ele=>{
                if(ele.flag) {
                  sum ++
                }
            })
            sum===this.list.length?this.full=true:this.full=false
            // if(sum===0) this.full = false
          
            this.$forceUpdate()//强制刷新


        }
        ,
        init(){
            // 购物车初始化数据
            this.$http.fetchcartlist().then(res=>{
            this.list = res?.list ||[]
        })


        },
        dellist(item,index){
            // 删除购物车数据
            const id = item._id
            this.$http.fetchdellist({id}).then(()=>{
                console.log("删除成功");
                this.list.splice(index,1)

            })
             


        }
    },created(){
        this.init()
        // 页面加载初始化调取数据
    },
 

    
    
}
</script>
<style lang="scss" scoped>
.jd-cart{
    padding-bottom: 4rem;
    padding-top: 1.333rem;
}
.jd-cart-row{
    border-bottom:1px solid #eee;
}
.btn{
    .span{
        padding: 0 0.133rem;
    }
    display: inline-block;
    margin: 0 0.067rem;
}
.goods-card {
margin: 0;
background-color: white;
}

.delete-button {
height: 100%;
}
</style>